<!DOCTYPE html>
<html lang="en">

<head>
    <title>Weight Conveter</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendors/bootstrap.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendors/animate.css">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendors/style.css">
    <!--===============================================================================================-->
    <style type="text/css">
        body {
            background-color: Thistle;
            animation-name: backgroundAnimi;
            animation-duration: 10s;
            animation-iteration-count: infinite;
        }
        
        @keyframes backgroundAnimi {
            0% {
                background-color: rgb(116, 26, 56);
            }
            25% {
                background-color: rgb(155, 55, 88);
            }
            50% {
                background-color: rgb(250, 0, 83);
            }
            75% {
                background-color: rgb(155, 55, 88);
            }
            100% {
                background-color: rgb(116, 26, 56);
            }
        }
    </style>
    <!--===============================================================================================-->
</head>

<body>

    <div class="container">
        <h1 class="heading animated bounceInDown">Weight Conveter <i class="fas fa-weight"></i></h1>
        <div class="row">
            <div class="col">
                <input type="number" id="weightKg" class="input animated bounceInRight" placeholder="Kilograms" oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)"><br>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input type="number" id="weightG" class="input animated bounceInLeft" placeholder="Grams" oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)"><br>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input type="number" id="weightMg" class="input animated bounceInRight" placeholder="Miligram" oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
            </div>
        </div>
        <div class="back"><a href="index.html">Home <i class="fa fa-home"></i></a></div>
    </div>
    <script type="text/javascript">
        function weightConverter(weightType, userVal) {

            userVal = parseFloat(userVal);

            var userweightKg = document.getElementById("weightKg");
            var userweightG = document.getElementById("weightG");
            var userweightMg = document.getElementById("weightMg");

            if (weightType == "weightKg") {
                userweightG.value = (userVal * 1000).toFixed(2);
                userweightMg.value = (userVal * 1000000).toFixed(2);
            }
            if (weightType == "weightG") {
                userweightKg.value = (userVal / 1000).toFixed(2);
                userweightMg.value = (userVal * 1000).toFixed(2);
            }
            if (weightType == "weightMg") {
                userweightKg.value = (userVal / 1000000).toFixed(2);
                userweightG.value = (userVal / 1000).toFixed(2);
            }
        }
    </script>

</body>

</html>